//获取博客
$.ajax({
    type: "GET",
    url: "/api/getboke",
    success:(data)=>{
        const obj = data.data.rows
        console.log(obj)
        $("#a2").html(obj[0].name).parent().next().children().html(obj[0].fabiao)
        $("#a3").html(obj[1].name).parent().next().children().html(obj[1].fabiao)
        $("#a4").html(obj[2].name).parent().next().children().html(obj[2].fabiao)
        $("#a5").html(obj[3].name).parent().next().children().html(obj[3].fabiao)
        for (let i = 0; i < obj.length; i++){
            $("#bk").append(`
            <div class="col-md-12 col-sm-6">
            <!-- post -->
            <div class="post post-list clearfix">
                <div class="thumb rounded">
                    <span class="post-format-sm">
                        <i class="icon-picture"></i>
                    </span>
                    <a href="http://localhost:3300/api/getboke/getfindbk?id=${obj[i].id}">
                        <div class="inner">
                            <img src=${obj[i].img} alt="post-title" />
                        </div>
                    </a>
                </div>
                <div class="details">
                    <ul class="meta list-inline mb-3">
                        <li class="list-inline-item"><a href="#"><img src="images/other/author-sm.png" class="author" alt="author"/>Han Yu</a></li>
                        <li class="list-inline-item"><a href="#">${obj[i].hot}阅读</a></li>
                        <li class="list-inline-item">${obj[i].createdAt.slice(0,10)}</li>
                    </ul>
                    <h5 class="post-title"><a href="http://localhost:3300/api/getboke/getfindbk?id=${obj[i].id}">${obj[i].name}</a></h5>
                    <p class="excerpt mb-0">${obj[i].text}</p>
                    <div class="post-bottom clearfix d-flex align-items-center">
                        <div class="social-share me-auto">
                            <button class="toggle-button icon-share"></button>
                        </div>
                        <div class="more-button float-end">
                            <a href="http://localhost:3300/api/getboke/getfindbk?id=${obj[i].id}"><span class="icon-options"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            `)
        }
    }
})
//获取博客
$("#recent-tab").on("click",function(){
    $.ajax({
        type: "GET",
        url: "/api/getboke",
        data:{page:2},
        success:(data)=>{
            const obj = data.data.rows
            $("#a6").html(obj[0].name).parent().next().children().html(obj[0].fabiao)
            $("#a7").html(obj[1].name).parent().next().children().html(obj[1].fabiao)
            $("#a8").html(obj[2].name).parent().next().children().html(obj[2].fabiao)
            $("#a9").html(obj[3].name).parent().next().children().html(obj[3].fabiao)
        }
    })
})
//查看更多
var z = 2;
$("#more").click(()=>{
    $.ajax({
        type: "GET",
        url: "/api/getboke",
        data: { page: z },
        success:(data)=>{
            const obj = data.data.rows
            for (let i = 0; i < obj.length; i++){
                $("#bk").append(`
                <div class="col-md-12 col-sm-6">
                <!-- post -->
                <div class="post post-list clearfix">
                    <div class="thumb rounded">
                        <span class="post-format-sm">
                            <i class="icon-picture"></i>
                        </span>
                        <a href="http://localhost:3300/api/getboke/getfindbk?id=${obj[i].id}">
                            <div class="inner">
                                <img src="images/posts/latest-sm-1.jpg" alt="post-title" />
                            </div>
                        </a>
                    </div>
                    <div class="details">
                        <ul class="meta list-inline mb-3">
                            <li class="list-inline-item"><a href="#"><img src="images/other/author-sm.png" class="author" alt="author"/>Han Yu</a></li>
                            <li class="list-inline-item"><a href="#">${obj[i].hot}</a></li>
                            <li class="list-inline-item">${obj[i].createdAt.slice(0,10)}</li>
                        </ul>
                        <h5 class="post-title"><a href="http://localhost:3300/api/getboke/getfindbk?id=${obj[i].id}">${obj[i].name}</a></h5>
                        <p class="excerpt mb-0">${obj[i].text}</p>
                        <div class="post-bottom clearfix d-flex align-items-center">
                            <div class="social-share me-auto">
                                <button class="toggle-button icon-share"></button>
                            </div>
                            <div class="more-button float-end">
                                <a href="http://localhost:3300/api/getboke/getfindbk?id=${obj[i].id}"><span class="icon-options"></span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                `)
            }
            z+=1 
        }
    })
})
//模糊查询
$(".mhcx").on("click",(e)=>{
    const name = $(".sss").val()
    $.ajax({
        type:"get",
        url: "/api/getboke/getmh",
        data:{name},
        success:(data)=>{
            const obj = data.data.rows
            $(".search-popup").hide("linear")
            $("#bk").html("")
            if(obj.length==0){
                $("#bk").append(`
                <div class="col-md-12 col-sm-6">
                    <h3 style="text-align: center">未查询到内容</h3>
                </div>
                `)
            }else{
                for (let i = 0; i < obj.length; i++){
                    $("#bk").append(`
                    <div class="col-md-12 col-sm-6">
                    <!-- post -->
                    <div class="post post-list clearfix">
                        <div class="thumb rounded">
                            <span class="post-format-sm">
                                <i class="icon-picture"></i>
                            </span>
                            <a href="http://localhost:3300/api/getboke/getfindbk?id=${obj[i].id}">
                                <div class="inner">
                                    <img src=${obj[i].img} alt="post-title" />
                                </div>
                            </a>
                        </div>
                        <div class="details">
                            <ul class="meta list-inline mb-3">
                                <li class="list-inline-item"><a href="#"><img src="images/other/author-sm.png" class="author" alt="author"/>Han Yu</a></li>
                                <li class="list-inline-item"><a href="#">${obj[i].hot}阅读</a></li>
                                <li class="list-inline-item">${obj[i].createdAt.slice(0,10)}</li>
                            </ul>
                            <h5 class="post-title"><a href="http://localhost:3300/api/getboke/getfindbk?id=${obj[i].id}">${obj[i].name}</a></h5>
                            <p class="excerpt mb-0">${obj[i].text}</p>
                            <div class="post-bottom clearfix d-flex align-items-center">
                                <div class="social-share me-auto">
                                    <button class="toggle-button icon-share"></button>
                                </div>
                                <div class="more-button float-end">
                                    <a href="http://localhost:3300/api/getboke/getfindbk?id=${obj[i].id}"><span class="icon-options"></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    `)
                }
            }
        }
    })
})
